﻿var current_fontsize = 11;
var current_font = "arial";
var current_textcolor = "#ff0000";
var bc_aspect_ratio = 1.636; //Australia, Denmark, New Zealand, Norway, Taiwan, Sweden, Vietnam
//ISO 216, A8 sized -- 1.423
//Ireland, Italy, United Kingdom, France, Germany, Netherlands, Spain, Switzerland, Belgium -- 1.545
//ISO/IEC 7810 ID-1, credit card sized -- 1.586
//Japan -- 1.655
//Hong Kong, China, Singapore -- 1.667
//Canada, United States -- 1.75
//Iran -- 1.771
//Argentina, Brazil, Czech Republic, Finland, Hungary, Israel, Kazakhstan, Poland, Romania, Russia, Serbia, Slovakia, Slovenia, Ukraine, Uzbekistan, Bulgaria, Latvia, Mexico and South Africa
//-- 1.8

$(document).ready(function () {
    var cardHeight = $(".card").width() / bc_aspect_ratio;
    $(".card").height(cardHeight + "px");
    $(".body-card").height(cardHeight - 23 + "px");
    $(".aspect-ratio").html("Aspect ratio: " + bc_aspect_ratio);

    $("#accordion").accordion();

    // Smart Wizard 	
    $('#wizard').smartWizard({
        transitionEffect: 'slideleft',
        onLeaveStep: leaveAStepCallback,
        visibleFinishButton: false
    });
    function leaveAStepCallback(obj) {
        var step_num = obj.attr('rel');
        if (step_num == 1) {
            if ($(".list-card").find(".select").size() > 0) {
                var cardSelected = $(".list-card").find(".select");
                //copy html card in select card template to frontcard zone and backcard zone
                $("#front-card").css("background-image", $(cardSelected).css("background-image"));
                //add textblock
                $("#body-front-card").html($(cardSelected).find(".body-card").html());

                var backCardSelected = $(cardSelected).parent("span").next().find(".card");
                $("#back-card").css("background-image", $(backCardSelected).css("background-image"));
                //add textblock
                $("#body-back-card").html($(backCardSelected).find(".body-card").html());

                $("#front-card, #back-card").attr("class", $(cardSelected).attr("class"));
                $("#front-card, #back-card").removeClass("readonly");

                if ($(cardSelected).hasClass("radius-all-corner"))
                    $(".rBorderType").addClass("radius-all-corner");
                else if ($(cardSelected).hasClass("radius-leftright-corner-1"))
                    $(".rBorderType").addClass("radius-leftright-corner-1");
                else if ($(cardSelected).hasClass("radius-leftright-corner-2"))
                    $(".rBorderType").addClass("radius-leftright-corner-2");
                return true;
            }
            else if (!$('#ckbBlankTemplate').is(':checked')) {
                showNotification('All For You Online', 'Please select a template or check using a blank template to create a new card');
                return false;
            }
            else {
                $("#body-front-card").html("");
                $("#body-back-card").html("");
                $("#front-card").css("background-image", "");
                $("#back-card").css("background-image", "");
            }
        }
        else if (step_num == 3) {
            //Save front card and back card

        }
        return true;
    }

    $(".rBorderType").change(function () {
        var val = $(this).val();
        if (val == "1") {
            $("#front-card ,#back-card").removeClass("radius-all-corner");
            $("#front-card, #back-card").removeClass("radius-leftright-corner-1");
            $("#front-card, #back-card").removeClass("radius-leftright-corner-2");
        }
        else if (val == "2") {
            $("#front-card, #back-card").removeClass("radius-leftright-corner-1");
            $("#front-card, #back-card").removeClass("radius-leftright-corner-2");
            $("#front-card, #back-card").addClass("radius-all-corner");
        }
        else if (val == "3") {
            $("#front-card, #back-card").removeClass("radius-all-corner");
            $("#front-card, #back-card").removeClass("radius-leftright-corner-2");
            $("#front-card, #back-card").addClass("radius-leftright-corner-1");
        }
        else {
            $("#front-card, #back-card").removeClass("radius-all-corner");
            $("#front-card, #back-card").removeClass("radius-leftright-corner-1");
            $("#front-card, #back-card").addClass("radius-leftright-corner-2");
        }
    });

    $("#body-front-card .text-block").live("mouseenter", function () {
        if (!$(this).hasClass("ui-draggable")) {
            $(this).draggable({ containment: "#body-front-card" });
        }
        if ($(this).find(".text-block-buttonhandle").size() == 0) {
            $(this).draggable('enable');
        }
    });

    $("#body-front-card .card-logo").live("mouseenter", function () {
        if (!$(this).hasClass("ui-draggable")) {
            $(this).draggable({ containment: "#body-front-card" });
        }
    });

    $("#body-back-card .text-block").live("mouseenter", function () {
        if (!$(this).hasClass("ui-draggable")) {
            $(this).draggable({ containment: "#body-back-card" });
        }
        if ($(this).find(".text-block-buttonhandle").size() == 0) {
            $(this).draggable('enable');
        }
    });

    $("#body-back-card .card-logo").live("mouseenter", function () {
        if (!$(this).hasClass("ui-draggable")) {
            $(this).draggable({ containment: "#body-back-card" });
        }
    });

    $(".text-block").live("click", function () {
        if ($(this).parents(".card").hasClass("readonly")) return;
        $(".text-block").removeClass("border_blue");
        $(this).addClass("border_blue");
    });

    $(".text-block .text").live("dblclick", function () {
        var textblock = $(this).parent();
        if ($(this).parents(".card").hasClass("readonly")) return;
        if (textblock.find(".text-block-buttonhandle").size() == 0)
            textblock.append("<div class='text-block-buttonhandle'><a id='remove-text-block' style='cursor:pointer;'>Delete</a></div>");
        textblock.addClass("active");
        textblock.draggable('disable');
        $(this).attr("contentEditable", "true");
        $(this).attr("unselectable", "on");
        $(".text-block").removeClass("editting");
        textblock.addClass("editting");
        selectElementText(this);
        $(this).focus();
    });

    $("#remove-text-block").live("click", function () {
        $(this).parents(".text-block").remove();
    });

    function selectElementText(el, win) {
        win = win || window;
        var doc = win.document, sel, range;
        if (win.getSelection && doc.createRange) {
            sel = win.getSelection();
            range = doc.createRange();
            range.selectNodeContents(el);
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (doc.body.createTextRange) {
            range = doc.body.createTextRange();
            range.moveToElementText(el);
            range.select();
        }
    }

    $(document).click(function (event) {
        if (!$(event.target).hasClass('text-block') && !$(event.target).parent().hasClass('text-block')) {
            $(".text-block").removeClass("active");
            $(".text-block").removeClass("border_blue");
            if ($(".text-block").find(".text-block-buttonhandle").size() >= 0) {
                $(".text-block").find(".text-block-buttonhandle").remove();
                $(".text-block .text").attr("contentEditable", "false");
                $(".text-block .text").attr("unselectable", "on");
                $(".text-block").removeClass("editting");
            }
        }
    });


    //    $('#fontsize').combobox({
    //        data: ['8', '10', '12', '14', '16', '20', '24', '28', '32', '40'],
    //        autoShow: false,
    //        listHTML: function (val, index) {
    //            return $.ui.combobox.defaults.listHTML(val, index);
    //        }
    //    });

    //BUTTON Apply font
    $(".applyFont").click(function () {
        current_fontsize = $(".fontsize").val();
        current_textcolor = $(".fontcolor").val();
        setColor("#" + current_textcolor);
    });

    $(".fontcolor").change(function () {
        setColor("#" + $(this).val());
    });

    $(".fontsize").change(function () {
        setSize($(this).val());
    });

    $(".fontText").change(function () {
        setFont($(this).val());
    });

    $("#step-2 .button-addtext").click(function () {
        $("#body-front-card").append("<div title='doubleclick to edit content' class='text-block'><div class='text'>New Label: Double Click To Edit Content</div></div>");
    });

    $("#step-2 .button-removetext").click(function () {
        $("#body-front-card").find(".border_blue").remove();
    });

    $("#step-3 .button-addtext").click(function () {
        $("#body-back-card").append("<div title='doubleclick to edit content' class='text-block'><div class='text'>New Label: Double Click To Edit Content</div></div>");
    });

    $("#step-3 .button-removetext").click(function () {
        $("#body-back-card").find(".border_blue").remove();
    });

    $("#ckbBlankTemplate").change(function () {
        if (this.checked) {
            $(".bc-form").find("input").attr("disabled", "disabled");
            $(".list-card .card").removeClass("select");
            $(".list-card .card").addClass("disabled");
        }
        else {
            $(".bc-form").find("input").removeAttr("disabled");
            $(".list-card .card").removeClass("disabled");
        }
    });

    $(".list-card .card").live("click", function () {
        if (!$(this).hasClass("select")) {
            if ($(this).hasClass("disabled")) {
                showNotification('Validation', 'Can not select this card, cause you checked on using blank template');
                return;
            }
            $(".list-card .card").removeClass("select");
            $(this).addClass("select");
        }
        else {
            $(this).removeClass("select");
        }
    });
});

$(function () {
    //client side - Javascript code
    var uploader = new qq.FileUploader({
        // pass the dom node (ex. $(selector)[0] for jQuery users)  -- change this 
        element: document.getElementById('file-uploader'),
        // path to server-side upload script
        action: 'FileUploadHandler.upload?w=' + $(".card").width() + '&h=' + $(".card").height(),
        onComplete: function (id, fileName, responseJSON) {
            //set background to front-card
            $(".qq-upload-drop-area").hide();
            $("#front-card").css("background-image", "url(_TEMP/THUMB/" + responseJSON.newfilename + ")");
        },
        debug: true
    });

    //client side - Javascript code
    var uploader = new qq.FileUploader({
        // pass the dom node (ex. $(selector)[0] for jQuery users)  -- change this 
        element: document.getElementById('file-uploader-backcard'),
        // path to server-side upload script
        action: 'FileUploadHandler.upload?w=' + $(".card").width() + '&h=' + $(".card").height(),
        onComplete: function (id, fileName, responseJSON) {
            //set background to front-card
            $(".qq-upload-drop-area").hide();
            $("#back-card").css("background-image", "url(_TEMP/THUMB/" + responseJSON.newfilename + ")");
        },
        debug: true
    });

    //client side - Javascript code
    var logoUploader = new qq.FileUploader({
        // pass the dom node (ex. $(selector)[0] for jQuery users)  -- change this 
        element: document.getElementById('logo-uploader'),
        // path to server-side upload script
        action: 'FileUploadHandler.upload?type=logo',
        template: '<div class="qq-uploader">' +
                '<div class="qq-upload-drop-area"><span>Drop files here to upload</span></div>' +
                '<div class="qq-upload-button"><b>UPLOAD IMAGE</b><br />' +
                '</div>' +
                '<ul class="qq-upload-list"></ul>' +
             '</div>',
        onComplete: function (id, fileName, responseJSON) {
            //set background to front-card
            $(".qq-upload-drop-area").hide();
            $("#body-front-card img").remove();
            $("#body-front-card").append("<img class='card-logo' src='_TEMP/THUMB/" + responseJSON.newfilename + "' />");
        },
        debug: true
    });
});

function domo() {
    $(document).live('keydown', 'Ctrl+b', function (evt) { setBold(); return false; });
    $(document).live('keydown', 'Ctrl+i', function (evt) { setItalic(); return false; });
    $(document).live('keydown', 'Ctrl+u', function (evt) { setUnderline(); return false; });
}

$(document).ready(domo);

var isZoomIn = false;
function zoomin() {
    if (isZoomIn) return;
    var card = document.getElementById("front-card");
    if (card.style.zoom != 0)
        card.style.zoom *= 1.6;
    else card.style.zoom = 1.6;
    isZoomIn = true;
}
function zoomout() {
    if (!isZoomIn) return;
    var card = document.getElementById("front-card");
    if (card.style.zoom != 0)
        card.style.zoom *= 0.625;
    else card.style.zoom = 0.625;
    isZoomIn = false;
}

function setColor(color) {
    rangy.init();
    var randomCssClass = "rangyTemp_" + (+new Date());
    var classApplier = rangy.createCssClassApplier(randomCssClass, true);
    classApplier.applyToSelection();

    // trung tin add font-size
    // Now use jQuery to add the CSS colour and remove the class
    $("." + randomCssClass).css({ "color": color }).removeClass(randomCssClass);
}

function setSize(fontsize) {
    rangy.init();
    var randomCssClass = "rangyTemp_" + (+new Date());
    var classApplier = rangy.createCssClassApplier(randomCssClass, true);
    classApplier.applyToSelection();

    // Now use jQuery to add the CSS colour and remove the class
    $("." + randomCssClass).css({ "font-size": fontsize + "px", "line-height": fontsize + "px" }).removeClass(randomCssClass);
}

function setBold() {
    rangy.init();
    var randomCssClass = "rangyTemp_" + (+new Date());
    var classApplier = rangy.createCssClassApplier(randomCssClass, true);
    classApplier.applyToSelection();

    // Now use jQuery to add the CSS colour and remove the class
    if ($("." + randomCssClass).css("font-weight") != "bold" && $("." + randomCssClass).css("font-weight") != "700")
        $("." + randomCssClass).css({ "font-weight": "bold" }).removeClass(randomCssClass);
    else
        $("." + randomCssClass).css({ "font-weight": "400" }).removeClass(randomCssClass);
}

function setItalic() {
    rangy.init();
    var randomCssClass = "rangyTemp_" + (+new Date());
    var classApplier = rangy.createCssClassApplier(randomCssClass, true);
    classApplier.applyToSelection();

    // Now use jQuery to add the CSS colour and remove the class
    if ($("." + randomCssClass).css("font-style") == "normal")
        $("." + randomCssClass).css({ "font-style": "italic" }).removeClass(randomCssClass);
    else
        $("." + randomCssClass).css({ "font-style": "normal" }).removeClass(randomCssClass);
}

function setUnderline() {
    rangy.init();
    var randomCssClass = "rangyTemp_" + (+new Date());
    var classApplier = rangy.createCssClassApplier(randomCssClass, true);
    classApplier.applyToSelection();

    // Now use jQuery to add the CSS colour and remove the class
    if ($("." + randomCssClass).css("text-decoration") == "none")
        $("." + randomCssClass).css({ "text-decoration": "underline" }).removeClass(randomCssClass);
    else
        $("." + randomCssClass).css({ "text-decoration": "none" }).removeClass(randomCssClass);
}

function setFont(font) {
    rangy.init();
    var randomCssClass = "rangyTemp_" + (+new Date());
    var classApplier = rangy.createCssClassApplier(randomCssClass, true);
    classApplier.applyToSelection();

    // Now use jQuery to add the CSS colour and remove the class
    $("." + randomCssClass).css({ "font-family": font }).removeClass(randomCssClass);
}

function getBackGroundImage(s) {
    var rx = /url\(["']?([^'")]+)['"]?\)/;
    return s.replace(rx, '$1');
}
function getFileName(s) {
    return getBackGroundImage(s).replace(/^.*(\\|\/|\:)/, '');
}
